<template>
  <div class="table1">
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="onEdit">编辑</a-button>
      <a-button type="info" @click="exportXlsx">导出</a-button>
    </div>
    <!-- <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
      :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange">
      
      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding:0;">活动详情</a-button>

        <a-button @click="onPeopleDetail(record)" type="link" style="padding:0;margin-left: 10px;">参与人员</a-button>
      </template>
    </z-table> -->
  </div>
</template>

<script>
  import { agreementList } from '@/api/sjsk/activity/group/detail/mature/table1'
  import { exportActivityXlsx } from '@/api/sjsk/activity/common.js'
  import { downLoadFileReader } from '@/utils/export-util/util'
  export default {
    data() {
      return {
        loading:false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10
        },
        pageData: {},
        form: {},
        columns: [
          {
            title: '组员名称',
            dataIndex: 'activityCode',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '提交情况',
            dataIndex: 'activityCode',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '提交日期',
            dataIndex: 'activityCode',
            width: 80,
            align: 'left',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          {
            title: '操作',
            width: 120,
            align: 'center',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created() {
      
    },
    methods: {
      exportXlsx() {
        exportActivityXlsx({
          activityId: this.$route.query.id,
          queryType: 3
        }).then(res => {
          const fileName = '小组活动签到表.xlsx'
          downLoadFileReader(res, fileName)
        })
      },
      onEdit() {
        this.$router.push(`/activity/sign-table?id=${this.$route.query.id}`)
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = {
          currentPage: 'pageNo'
        }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.queryParam, this.pageFilter)
        form.activityId = this.$route.query.id
        this.loading = true
        agreementList(form).then((res) => {
            if (res.success) {
              this.pageData = res.result ? res.result : {}
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
    }
  }
</script>

<style lang="less" scoped>
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;
    .btn-wrap{
      margin-bottom: 20px;
    }
  }
</style>
